<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Product details.css">
    <title>团购APP产品详细</title>
</head>
<body>
    <header class="clearfix">
        <div class="back fl">
            <button>Back</button>
        </div>
        <div class="dizhi fr">
            <img src="./img/xximg/star.png" alt="">
        </div>
        <div class="fenlei">
            <p>产品详情</p>
        </div>
        
        
    </header>
    <div id="main">
        <div class="header">
            <img src="./img/xximg/xx00_03.png" alt="">
        </div>
        <div class="nav clearfix">
            <p class="fl">￥32</p>
            <button class="fr">购买</button>

        </div>
        <div class="haop clearfix">
            <div class="fl">
                <img src="./img/xximg/star.png" alt="">
                <span>好评度</span><span>99%</span>
            </div>
            <p class="fr">共605个评价&gt;</p>

        </div>
        <div class="sysh clearfix">
            <p class="fl">适用商户</p>
            <p class="fr">&gt;</p>
        </div>
        <div class="wsss">
            <ul>
                <li class="clearfix">
                    <img class="fl" src="./img/xximg/food3.png" alt="">
                    <div class="fl">
                        <p>万岁寿司（正佳店）</p>
                        <p>
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            10分
                        </p>
                        <p>离你100米</p>
                        <p><a href="">查看详情&gt;&gt;</a></p>
                        <button class="fr">进入</button>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./img/xximg/food4.png" alt="">
                    <div class="fl">
                        <p>万岁寿司（正佳店）</p>
                        <p>
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            10分
                        </p>
                        <p>离你100米</p>
                        <p><a href="">查看详情&gt;&gt;</a></p>
                        <button class="fr">进入</button>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./img/xximg/food5.jpg" alt="">
                    <div class="fl">
                        <p>万岁寿司（正佳店）</p>
                        <p>
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            10分
                        </p>
                        <p>离你100米</p>
                        <p><a href="">查看详情&gt;&gt;</a></p>
                        <button class="fr">进入</button>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./img/xximg/food3.png" alt="">
                    <div class="fl">
                        <p>万岁寿司（正佳店）</p>
                        <p>
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            <img src="./img/xximg/star.png" alt="">
                            10分
                        </p>
                        <p>离你100米</p>
                        <p><a href="">查看详情&gt;&gt;</a></p>
                        <button class="fr">进入</button>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <footer>
            <ul class="clearfix">
               <li class="fl">
                    <a href="index.html"><img src="img/flimg/11_03.png" alt=""></a>
                    <p>首页</p>
                </li>
               <li class="fl">
                            <a href="classification.html"><img src="img/syimg/class.png" alt=""></a>
                            <p>分类</p>
                   </li>
                    <li class="fl">
                            <a href="find.html"><img src="img/syimg/discover.png" alt=""></a>
                            <p>发现</p>
                    </li>
                    <li class="fl">
                            <a href="My.html"><img src="img/syimg/person.png" alt=""></a>
                            <p>我的</p>
                    </li>
        
                </ul>
    </footer>
    <script>
            
                
                    document.body.style.height = window.innerHeight + "px";
                
                    /*动态改变根元素字体大小*/
                    function recalc() {
                        // 获取客户端宽度
                        var clientWidth = document.documentElement.clientWidth;
                        if(!clientWidth) return;
                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
                        document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        
                    }
                    // 初始化计算rem
                    function initRecalc() {
                        
                        recalc();
                        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
                        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                        if(!document.addEventListener) return;
                        window.addEventListener(resizeEvt, recalc, false);
                        document.addEventListener('DOMContentLoaded', recalc, false);
                    }
                    initRecalc();
                        
                        
                        
             </script>  
</body>
</html>